:deep(.card-chat) {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  .ant-card-head {
    background: #5fb7ac;
  }

  .ant-card-body {
    padding: 10px;
  }
}

.msg-box {
  position: relative;
  padding: 12px 18px;
  height: 400px;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #ccc;
  }

  &::-webkit-scrollbar-track {
    background: rgba(240, 227, 227, 0.5);
  }

  >li {
    +li {
      margin-top: 10px;
    }

    &.sys_msg {
      text-align: center;

      .content {
        display: inline-block;
        line-height: 30px;
        padding: 0 15px;
        border-radius: 3px;
        background-color: #e2e2e2;
        cursor: default;
        font-size: 14px;
      }
    }

    &.mine {
      text-align: right;

      .chat-item-wrap {
        .txt-wrap {
          padding-right: 40px;

          .chat-text span {
            background-color: #5fb878;
            color: #fff;

            &::after {
              right: -10px;
              border-color: #5fb878 transparent transparent;
            }
          }

          .chat-text img {
            height: 80px;
            border-radius: 0%;
            clear: right;
          }

        }

        img {
          float: right;
        }
      }
    }

    &.others {
      text-align: left;

      .chat-item-wrap {
        .txt-wrap {
          padding-left: 40px;

          .chat-text span {
            background-color: #e2e2e2;
            color: #000;

            &::after {
              left: -10px;
              border-color: #e2e2e2 transparent transparent;
            }
          }

          .chat-text img {
            height: 80px;
            border-radius: 0%;
            clear: left;
          }
        }

        img {
          float: left;
        }
      }
    }
  }

  .chat-item-wrap {
    .txt-wrap {
      line-height: 24px;
      font-size: 12px;
      white-space: nowrap;
      color: #999;

      >span {
        margin-right: 10px;
      }

      .chat-text {
        margin-top: 5px;

        span {
          position: relative;
          border-radius: 4px;
          padding: 8px 15px;
          font-size: 14px;

          &::after {
            content: '';
            position: absolute;
            top: 7px;
            width: 0;
            height: 0;
            border-style: solid dashed dashed;
            overflow: hidden;
            border-width: 10px;
          }
        }
      }
    }

    img {
      width: 30px;
      height: 30px;
      border-radius: 100%;
    }
  }
}

.clearfix {
  /* 触发 hasLayout */
  zoom: 1;
}

.clearfix:after {
  content: "020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.chat-tool {
  border-top: 1px solid rgb(228, 226, 226);
}

:deep(.form-chat) {
  display: flex;

  .form-item--content {
    flex: 1;
    margin: 0 16px 0 0;
  }
}